<template>
    <div class="grounds-refunds">
       <p>申请退款</p>
        <ul>
            <li>
                <span>退款原因 <b>*</b>：</span>
                <Select v-model="model8"  style="width: 200px">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </li>
            <li>
                 <span>退款金额 <b>*</b>：</span>
                <Input v-model="value" placeholder="Enter something..." style="width: 200px" />
            </li>
            <li>
                <span>退款说明：</span>
                <Input v-model="value" placeholder="Enter something..." style="width: 200px" />
            </li>
            <li class="clearfix">
                <span>上传凭证：</span>
                <div class="box clearfix">
                    <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                    <p>最多上传3张</p>
                </div>

            </li>
        </ul>
        <span @click="fun()">提交确认</span>
    </div>
</template>

<script>
    export default {
        name: "GroundsRefunds",
        data () {
            return {
                cityList: [
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    },
                    {
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
                        value: 'Ottawa',
                        label: 'Ottawa'
                    },
                    {
                        value: 'Paris',
                        label: 'Paris'
                    },
                    {
                        value: 'Canberra',
                        label: 'Canberra'
                    }
                ],
                model8: '',
                value: '',
                dialogImageUrl: '',
                dialogVisible: false
            }
        },
        methods:{
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            fun () {
                this.$router.push({path:'/my/myindex/groundsrefundsdelist'})
            }
        }
    }
</script>

<style  lang="less">
    @import "../../../style/style";
 .grounds-refunds{
     >:first-child{
         color: @theme-color-dark;
         font-size: 18px;
         border-bottom: 1px solid @theme-color-dark;
         width: 100%;
         margin-bottom: 20px;
     }
     >span{
         background-color: @theme-color-dark;
         color: white;
         font-size: 14px;
         padding: 12px 92px;
         margin-left:120px;
         margin-top: 50px;
         cursor: pointer;
     }
     ul{
         margin-bottom: 50px;
         li{
             margin-bottom: 20px;
             >span{
                 display: block;
                 float: left;
                 width: 120px;
                 text-align: right;
                 padding-right: 20px;
                 color: #666666;
                 font-size: 16px;
                 >b{
                     color: @theme-color-dark;
                 }
             }

             input{
                 float: left;
             }
             >.box{
                 border: solid 1px #e0e0e0;
                 width: 360px;
                 height: 165px;
                 float: left;
                 padding: 20px;
                 p{
                     text-align: center;
                     color: #999999;
                     padding-top: 20px;
                 }
             }
         }
     }
     .el-upload--picture-card{
         width: 90px;
         height: 90px;
         line-height: 103px;
     }
 }
</style>